<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link href="./css/main.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link href="./css/element.css" rel="stylesheet">


</head>
<body>
<div id="app">
    <h1>商品数据管理</h1>
    <div class="add-btn">
        <el-button @click="beginAdd" size="small" type="primary">新增商品</el-button>
    </div>
    <el-table
            :data="items"
            @cell-click="handleCellClick"
            border
            style="width: 100%">
        <el-table-column
                :align="h.align" :key="h.prop"
                :label="h.text"
                :prop="h.prop"
                :width="h.width"
                v-for="h in headers"
                v-if="h.prop !== 'image' && h.prop !== 'spec'"
        >
        </el-table-column>
        <el-table-column
                :align="h.align"
                :label="h.text"
                :prop="h.prop"
                :width="h.width"
                v-else-if="h.prop === 'spec'"
        >
            <template slot-scope="scope">
                <div v-for="(v, k) in parseJSON(scope.row.spec)">
                    {{k}} : {{v}}
                </div>
            </template>
        </el-table-column>
        <el-table-column
                :align="h.align"
                :label="h.text"
                :prop="h.prop"
                :width="h.width"
                v-else
        >
            <template slot-scope="scope">
                <el-image
                        :src="scope.row.image"
                        fit="fill"
                        style="width: 50px; height: 50px"></el-image>
            </template>

        </el-table-column>
        <el-table-column :width="160" align="center" label="操作">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.$index, scope.row)" circle icon="el-icon-edit" plain size="mini"
                           type="primary"></el-button>
                <el-button @click="handleDelete(scope.$index, scope.row)" circle icon="el-icon-delete" plain size="mini"
                           type="danger"></el-button>
                <el-tooltip class="item" content="上架" effect="dark" placement="top-start" v-if="scope.row.status === 2">
                    <el-button @click="handleUp(scope.row.id)" circle icon="el-icon-upload2" plain size="mini"
                               type="success"></el-button>
                </el-tooltip>
                <el-tooltip class="item" content="下架" effect="dark" placement="top-start" v-else>
                    <el-button @click="handleDown(scope.row.id)" circle icon="el-icon-download" plain size="mini"
                               type="info"></el-button>
                </el-tooltip>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            :page-size="5"
            :total="total"
            @current-change="query"
            background
            layout="prev, pager, next"
            style="margin-top: 5px">
    </el-pagination>
    <el-dialog :visible.sync="formVisible" style="padding: 0 20px;" title="商品信息" width="30%">
        <el-form :label-width="formLabelWidth" :model="item" label-position="left" size="small">
            <el-form-item label="商品标题">
                <el-input autocomplete="off" v-model="item.title"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input autocomplete="off" v-model="item.name"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <el-input autocomplete="off" v-model="item.category"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌">
                <el-input autocomplete="off" v-model="item.brand"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input autocomplete="off" v-model.number="item.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" v-if="!isEdit">
                <el-input autocomplete="off" v-model.number="item.stock"></el-input>
            </el-form-item>
            <el-form-item label="商品销量">
                <!--  v-model.number 标识这个字段的数据类型为 number -->
                <el-input autocomplete="off" v-model.number="item.sold"></el-input>
            </el-form-item>
            <el-form-item label="商品规格">
                <el-input autocomplete="off" v-model="item.spec"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-input autocomplete="off" v-model="item.image"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button @click="confirmEdit" type="primary">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="stockFormVisible" style="padding: 0 20px;" width="30%">
        <el-form :inline="true" :model="item" label-position="left" size="small">
            <el-form-item>
                <el-input autocomplete="off" v-model.numner="item.stock"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="confirmStock" type="primary">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script>
    // 设置后台服务地址
    axios.defaults.baseURL = "http://localhost:8081";
    axios.defaults.timeout = 3000;

    const app = new Vue({
        el: "#app",
        data: {
            headers: [
                {prop: "id", text: "ID", width: 100, align: "center"},
                {prop: "name", text: "商品名称", width: 0, align: "center"},
                {prop: "category", text: "分类", width: 100, align: "center"},
                {prop: "brand", text: "品牌", width: 100, align: "center"},
                {prop: "price", text: "价格", width: 100, align: "center"},
                {prop: "stock", text: "库存", width: 100, align: "center"},
                {prop: "image", text: "图片", width: 80, align: "center"},
                {prop: "spec", text: "规格", width: 180, align: "center"},
            ],
            items: [],
            total: 1000,
            formVisible: false, // 是否显示表单
            stockFormVisible: false, // 是否显示库存表单
            formLabelWidth: "100px", // 表单label宽度
            item: {}, // 表单中的酒店数据
            isEdit: false, // 是否是更新
            lastPage: 1,// 上一次查询的页码
        },
        created() {
            this.query(1);
        },
        methods: {
            handleCellClick(row, column) {
                if (column.property === 'stock') {
                    // 回显库存
                    this.item = {id: row.id, stock: row.stock}
                    // 表单显示
                    this.stockFormVisible = true;
                }
            },
            confirmStock(v1, v2) {
                axios.put("/item/stock", this.item)
                    .then(() => {
                        this.$message({
                            message: '更新库存成功',
                            type: 'success'
                        });
                        this.stockFormVisible = false;
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            message: '更新库存失败',
                            type: 'error'
                        });
                        console.log(err);
                    })
            },
            beginAdd() {
                this.isEdit = false;
                this.item = {image: ""};
                this.formVisible = true;
            },
            query(page) {
                this.lastPage = page;
                axios.get("/item/list", {
                    params: {
                        page: page, size: 5
                    }
                })
                    .then(resp => {
                        this.items = resp.data.list;
                        this.total = resp.data.total;
                    })
                    .catch(err => console.log(err));
            },
            handleEdit(v1, v2) {
                /*if (v2.status === 1) {
                  this.$message({
                    message: '上架的商品不能修改，请先下架！',
                    type: 'error'
                  });
                  return;
                }*/
                this.isEdit = true;
                this.item = JSON.parse(JSON.stringify(v2));
                this.formVisible = true;
            },
            handleDelete(v1, v2) {
                /*if (v2.status === 1) {
                  this.$message({
                    message: '上架的商品不能删除，请先下架！',
                    type: 'error'
                  });
                  return;
                }*/
                this.$confirm('此操作将永久删除商品信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteById(v2.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            confirmEdit() {
                if (this.isEdit) {
                    axios.put("/item", this.item)
                        .then(resp => {
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                            this.formVisible = false;
                            this.reload();
                        })
                        .catch(err => {
                            this.$message({
                                message: '更新失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                } else {
                    axios.post("/item", this.item)
                        .then(resp => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.formVisible = false;
                            this.reload();
                        })
                        .catch(err => {
                            this.$message({
                                message: '新增失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                }

            },
            deleteById(id) {
                axios.delete("/item/" + id)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                        console.log(err);
                    })
            },
            handleUp(id) {
                this.updateStatus(id, 1);
            },
            handleDown(id) {
                this.updateStatus(id, 2);
            },
            updateStatus(id, status) {
                let action = status === 1 ? "上架" : "下架";

                axios.put("/item/status/" + id + "/" + status)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: action + '成功!'
                        });
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: action + '失败!'
                        });
                        console.log(err);
                    })
            },
            reload() {
                this.query(this.lastPage);
            },
            parseJSON(str) {
                return JSON.parse(str);
            }
        }
    })
</script>
</body>
</html>